<template>
  <div class="actionList-wrapper" ref="scroll">
    <div class="action-form">
      <input v-model="inputData" type="text"/>
      <button @click="handleAddClick">增加</button>
    </div>
    <ul class="actionList">
      <transition-group :duration="500" name="fade" leave-active-class="slideOutRight animated fade-leave-active fade-move">
      <li class="actionList__item border-bottom" v-for="(item, index) of list" :key="item">
        <div>{{item}}</div>
        <div class="btn-delete" @click="handleDeleteClick(index)">删除</div>
      </li>
      </transition-group>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
import Bscroll from 'better-scroll'
export default {
  name: 'ActionList',
  props: {
    list: Array
  },
  data () {
    return {
      inputData: ''
    }
  },
  methods: {
    handleDeleteClick (index) {
      this.list.splice(index, 1)
    },
    handleAddClick () {
      this.$emit('addClick', this.inputData)
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.scroll, {
      click: true
    })
  }
}
</script>

<style lang="scss" scoped>
  @import "~styles/scss/variable.scss";
  .action-form {
    display: flex;
    padding: .2rem;
    input {
      flex: 1;
      margin-right: .2rem;
      height: .6rem;
      line-height: .6rem;
      text-indent: .1rem;
    }
    button {
      width: 1.2rem;
      height: .6rem;
      line-height: .6rem;
      background: $color-primary;
      color: #fff;
      border: none;
    }
  }
  .actionList-wrapper {
    position: absolute;
    top: .88rem;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    .actionList {
      &__item {
        display: flex;
        justify-content: space-between;
        background: #fff;
        padding: .26rem .2rem;
        font-size: $fontSize-regular;
        color: $color-text-regular;
        .btn-delete {
          display: inline-block;
          padding: .1rem;
          background: #f5f5f5;
          border-radius: .01rem;
          border: solid 1px #eee;
          font-size: $fontSize-small;
        }
      }
    }
    .fade-leave-to {
      opacity: 0;
    }
    .fade-leave-active {
      transition: opacity .5s;
    }
  }
</style>
